{extend name="public:layout" /}
{block name="title"}添加规格{/block}
{block name="head"}
<script src="/public/plugins/template/template.js"></script>
{/block}
{block name="body"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox">
        <div class="ibox-title">
            <ol class="breadcrumb">
                <li><i class="fa fa-hand-o-right"></i> <a href="{:url('index')}"> 规格列表</a></li>
                <li class="active">添加规格</li>
            </ol>
        </div>
        <div class="ibox-content">
            <form method="post" class="form-horizontal" id="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">规格名称</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" placeholder="请输入规格名称"
                               name="attr_name" value="" datatype="*"/>
                    </div>
                    <label class="col-sm-2 control-label Validform_label">排序</label>
                    <div class="col-sm-2">
                        <input type="text" class="form-control"
                               name="attr_sort" value="0" datatype="n"/>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">展示形式</label>
                    <div class="col-sm-4">
                        <label class="radio-inline i-checks">
                            <input type="radio" name="is_image" value="0" checked> 文字
                        </label>
                        <label class="radio-inline i-checks">
                            <input type="radio" name="is_image" value="1"> 图片
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label Validform_label">规格值</label>
                    <div class="col-sm-10">
                        <table class="table">
                            <thead>
                            <tr>
                                <th width="160">属性图片</th>
                                <th>属性值</th>
                                <th width="120">排序</th>
                                <th width="120">操作</th>
                            </tr>
                            </thead>
                            <tr>
                                <td>{:widget('common/Form/singleImg',['field'=>'ipt_item_image','',$uid])}</td>
                                <td><input type="text" name="ipt_item_name" class="form-control" /> </td>
                                <td><input type="text" name="ipt_item_sort" class="form-control" value="0" /></td>
                                <td><a class="btn btn-primary" href="javascript:;" onclick="addItem(this);">添加属性值</a></td>
                            </tr>
                            <tbody id="itemList"></tbody>
                        </table>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-10 col-sm-offset-2">
                        <button class="btn btn-primary" type="button" id="btnSub">
                            保存内容
                        </button>
                        <a href="{:url('index')}" class="btn btn-white">取消</a>
                        <span id="validError"></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{literal}
<script id="itemListTpl" type="text/html">
    {{each list as value i}}
    <tr>
        <td>
            {{if value.item_image!=''}}
            <img src="{{value.item_image}}" style="width:48px;height:48px;" />
            {{/if}}
            <input type="hidden" name="item[{{i}}][item_image]" value="{{value.item_image}}" />
        </td>
        <td>
            <input type="text" class="form-control itemName" name="item[{{i}}][item_name]" value="{{value.item_name}}" />
        </td>
        <td>
            <input type="text" class="form-control" name="item[{{i}}][item_sort]" value="{{value.item_sort}}" />
        </td>
        <td><a href="javascript:;" onclick="del(this)">删除</a></td>
    </tr>
    {{/each}}
</script>
{/literal}
{/block}
{block name="script"}
<script type="text/javascript">
    var data={"list" : []};
    var render = template('itemListTpl');
    $(function () {
        iCheck();
        ajaxSubForm('#btnSub');
    })
    //添加属性值
    function addItem() {
        var item_name = $("input[name='ipt_item_name']").val();
        var item_image = $("input[name='ipt_item_image']").val();
        var item_sort = $("input[name='ipt_item_sort']").val();
        In('layer',function () {
            if(item_name==''){
                layer.alert('属性值不能为空！');
                return false;
            }
            if(isNaN(item_sort)){
                layer.alert('排序必须位数字！');
                return false;
            }
            var isAdd = true;
            $.each(data.list, function(i, val){
                if(val.item_name == item_name){
                    isAdd = false;
                    return false;
                }
            });
            if(isAdd==false){
                layer.alert('该属性已存在！');
                return false;
            }
            data.list.push({"item_image":item_image,"item_name" : item_name,"item_sort":item_sort});
            //重置输入框
            $("input[name='ipt_item_name']").val('');
            $("input[name='ipt_item_image']").val('');
            $("input[name='ipt_item_sort']").val('0');
            delSingleJpg('.imgBar','ipt_item_image');
            createHtml(data);
        })
    }
    //删除属性
    function del(obj) {
        var itemNameObj = $(obj).closest('tr').find('.itemName');
        var itemName = itemNameObj.val();
        $.each(data.list, function(i, val){
            if(val.item_name == itemName){
                data.list.splice(i,1);
                return false;
            }
        });
        createHtml(data);
    }
    //编译模板
    function createHtml(data) {
        $('#itemList').html(render(data));
    }
</script>
{/block}